<template name="merchant">
    <div class="uni_wrapper">
        <div class="header">
            <img src="@/assets/merchant/cardBg.png" class="bg" alt="" />
            <div class="img_content">
                <div class="title">直营商户信息</div>
            </div>
            <div class="catTrading" @click="catTrading">
                <text>商户月均交易数据</text>
                <img src="@/assets/merchant/toNext.png" alt="" />
            </div>
            <div class="bg_content">
                <img src="@/assets/merchant/bgBox.png" class="bgBox" alt="" />
                <img src="@/assets/merchant/minBg.png" class="minBg" alt="" />
                <div class="bg_content_cont">
                    <div class="line">
                        <div class="left">自营商户数 {{ directCount }}</div>
                        <!--                        <div class="right">下级团队商户数 {{ belowCount }}</div>-->
                    </div>
                    <div class="line">
                        <div class="left">（本月新增商户数 {{ currDirectCount }}）</div>
                        <!--                        <div class="right">（本月新增商户数 {{ currBelowCount }}）</div>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="allSearch">
            <div class="search">
                <van-search shape="round" style="background: #fff" v-model="nameOrPhone" show-action placeholder="请输入商户姓名或商户编号">
                    <template #action>
                        <div class="onClickButton" @click="onClickButton">搜索</div>
                    </template>
                </van-search>
            </div>
            <div class="floor">
                <div class="left">
                    <div @click="selectRealName('Y')" :class="active === 'Y' ? 'active' : ''" class="RealName">已实名</div>
                    <div @click="selectRealName('N')" :class="active === 'N' ? 'active' : ''" class="RealName">未实名</div>
                </div>
                <div class="right">共 {{ merchartsTotal }} 户</div>
            </div>
            <div class="floor1">
                <div class="left" @click="showSort = true">
                    <text>排序</text>
                    <img src="@/assets/px.png" />
                </div>
                <div class="right" @click="show = true">
                    <text>筛选</text>
                    <img src="@/assets/sx.png" />
                </div>
            </div>
        </div>
        <div class="cardList">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <div class="card" v-for="item in list" :key="item" @click="catDetail(item)">
                    <img class="head" src="@/assets/merchant/head.png" alt="" />
                    <div class="card-content">
                        <div class="name">
                            <text>{{ item.name || '未实名认证' }}</text>
                            <div class="posType"  ><span v-if="item.type">{{ item.type == 'DQPOS' ? '电签' : '传统' }}</span></div>

                            <img v-if="item.agencySource === 'LS'" style="height: 20px" src="@/assets/LS.png" />
                            <img v-if="item.agencySource === 'HLB'"  style="height: 20px" src="@/assets/hlb.png" />
                        </div>
                        <div class="cycle" v-if="item.type">{{ item.type == 'DQPOS' ? '电签' : '传统' }}{{ item.rate }}%+{{ item.capEstreatRate }}</div>
                        <div class="Trading">
                            <div class="left">
                                <div class="value">{{ item.currMonthTransAmount }}万</div>
                                <div class="label">本月总交易额</div>
                            </div>
                            <div class="right">
                                <div class="value">{{ item.sumTransAmount }}万</div>
                                <div class="label">累计交易额</div>
                            </div>
                        </div>
                    </div>
                    <div class="itemStatus" v-if="item.compliance">{{ item.compliance }}</div>
                </div>
                <empty v-if="!list.length"></empty>
            </van-list>
        </div>
        <!-- 排序 -->
        <van-popup v-model:show="showSort" position="right" :style="{ width: '70%', height: '100%' }">
            <div class="popup-content">
                <div class="title">排序</div>
                <div style="margin-top: 20px">按时间排序</div>
                <div class="btnBox">
                    <div class="btnItem" @click="sortType('desc')" :class="sort == 'desc' ? 'acticitybtn' : ''">正序</div>
                    <div class="btnItem" @click="sortType('asc')" :class="sort == 'asc' ? 'acticitybtn' : ''">倒叙</div>
                </div>
                <!-- <div style="margin-top: 20px">排序类型</div>
                <div class="btnBox">
                    <div class="btnBox">
                        <div class="btnItem" @click="sortType(item)" :class="posType == item.type ? 'acticitybtn' : ''">本月总交易额</div>
                        <div class="btnItem" @click="sortType(item)" :class="posType == item.type ? 'acticitybtn' : ''">累计交易额</div>
                        <div class="btnItem" @click="sortType(item)" :class="posType == item.type ? 'acticitybtn' : ''">唤醒时间</div>
                    </div>
                </div> -->
            </div>
            <div class="btnBottom">
                <div class="reset" @click="onRest('sort')">重置</div>
                <div class="onSub" @click="onSure('sort')">确定</div>
            </div>
        </van-popup>
        <!-- 筛选 -->
        <van-popup v-model:show="show" position="right" :style="{ width: '70%', height: '100%' }">
            <div class="popup-content">
                <div class="title">筛选</div>
                <div style="margin-top: 20px">机具编号</div>
                <div class="btnBox">
                    <van-field
                        style="background: #f1f1f1; line-height: 30px; box-sizing: border-box; padding: 0 5px"
                        v-model="tusn"
                        placeholder="请输入机具编号"
                    />
                </div>
                <div style="margin-top: 20px">机具类型</div>
                <div class="btnBox">
                    <div
                        class="btnItem"
                        @click="choseType(item)"
                        :class="posType == item.type ? 'acticitybtn' : ''"
                        v-for="(item, index) in optionList"
                        :key="index"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div style="margin-top: 20px">达标状态</div>
                <div class="btnBox">
                    <div
                        class="btnItem"
                        @click="choseStatus(item)"
                        :class="finshStatus == item.status ? 'acticitybtn' : ''"
                        v-for="(item, index) in activeList"
                        :key="index"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div style="margin-top: 20px">选择机构</div>
                <div class="btnBox">
                    <div
                        class="btnItem"
                        @click="choseAgencySource(item)"
                        :class="AgencySourceStatus == item.value ? 'acticitybtn' : ''"
                        v-for="(item, index) in AgencySource"
                        :key="index"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <!-- <div style="margin-top: 20px">商户阶段</div>
                <div class="btnBox">
                    <div
                        class="btnItem"
                        @click="choseStage(item)"
                        :class="mechantStage == item.stage ? 'acticitybtn' : ''"
                        v-for="(item, index) in typeList"
                        :key="index"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div style="margin-top: 20px">交易情况</div>
                <div class="btnBox">
                    <div
                        class="btnItem"
                        @click="chosetrade(item)"
                        :class="tradeStatus == item.stage ? 'acticitybtn' : ''"
                        v-for="(item, index) in tradeList"
                        :key="index"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div style="margin-top: 20px">唤醒时间</div>
                <div class="btnBox" style="width: 100%">
                    <div class="dateContent" @click="showDay = true">
                        <div class="timeItem" style="margin-right: 10px">{{ startTime }}</div>
                        至
                        <div class="timeItem" style="margin-left: 10px">{{ endTime }}</div>
                    </div>
                </div> -->
            </div>
            <div class="btnBottom">
                <div class="reset" @click="onRest('filter')">重置</div>
                <div class="onSub" @click="onSure('filter')">确定</div>
            </div>
        </van-popup>
        <!-- 日期选择组件 -->
        <van-calendar
            :allow-same-day="true"
            :min-date="minDate"
            :max-date="maxDate"
            color="#55bbf9"
            v-model:show="showDay"
            :default-date="defaultDay"
            :show-confirm="false"
            type="range"
            @confirm="onConfirm"
        >
            <template #footer>
                <div class="footer">
                    <div class="item" @click="getDay('上周', 'date')">
                        <van-button type="primary">上周</van-button>
                    </div>
                    <div class="item" @click="getDay('本周', 'date')">
                        <van-button type="primary">本周</van-button>
                    </div>
                    <div class="item" @click="getDay('上月', 'date')">
                        <van-button type="primary">上月</van-button>
                    </div>
                    <div class="item" @click="getDay('本月', 'date')">
                        <van-button type="primary">本月</van-button>
                    </div>
                </div>
            </template>
        </van-calendar>
    </div>
</template>

<script setup name="merchant">
import { getDayPro } from '@/utils/utils.ts'
// import Router from '@/router'
const Router = useRouter()
import { customerCountStatistic, findCustomerStatisticList } from '@/api/cust'
import {findByTargetAndClassesId} from "@/api/dataAnalysis";
import {findAgencySource} from "@/api/agent";
import {showToast} from "vant";
const nameOrPhone = ref('')
const active = ref('Y')
const show = ref(false)
const showSort = ref(false)
const tusn = ref('')
const showDay = ref(false)
const defaultDay = ref([])
const belowCount = ref(0)
const currBelowCount = ref(0)
const currDirectCount = ref(0)
const directCount = ref(0)
const sumCount = ref(0)
const optionList = reactive([
    { name: '全部', type: '' },
    { name: '电签', type: 'DQPOS' },
    { name: '传统', type: 'CTPOS' }
])
const activeList = reactive([
    { name: '全部', status: '' },
    { name: '进行中', status: 'running' },
    { name: '未达标', status: 'unQualified' },
    { name: '已达标', status: 'qualified' }
])
const typeList = reactive([
    { name: '全部', stage: '' },
    { name: '成长期', stage: 'POS_CREDIT' },
    { name: '稳定期', stage: 'POS_DEBIT' },
    { name: '固定费率', stage: 'POS_FLASH' }
])
const tradeList = reactive([
    { name: '全部', stage: '' },
    { name: '首笔后无交易', stage: 'POS_CREDIT' },
    { name: '近30天内无交易', stage: 'POS_DEBIT' },
    { name: '近60天无交易', stage: 'POS_FLASH' },
    { name: '近90天无交易', stage: 'POS_FLASHs' }
])
const AgencySource = ref([
    {name: "全部", value: ""},
])

const list = ref([])
const loading = ref(false)
const finished = ref(false)
const posType = ref('')
const finshStatus = ref('')
const AgencySourceStatus = ref('')
const mechantStage = ref('')
const tradeStatus = ref('')
const merchartsTotal = ref(0)
const sort = ref('desc')
const currentPage = ref(1)
// 日历设置选择范围
const minDate = ref(new Date(new Date().getFullYear() - 1, new Date().getMonth() + 1, new Date().getDate()))
const maxDate = ref(new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()))
const startTime = ref('开始时间')
const endTime = ref('结束时间')
getDayPro('本月').then(res => {
    defaultDay.value = [new Date(res.split('至')[0]), new Date(res.split('至')[1])]
})

const sortType = val => {
    sort.value = val
}
const gatFindAgencySource = () => {
    findAgencySource({}).then(res=>{
        AgencySource.value = AgencySource.value.concat(res.object)
    })
}
gatFindAgencySource()
const onConfirm = values => {
    const [start, end] = values
    showDay.value = false
    startTime.value = res.split('至')[0]
    endTime.value = res.split('至')[1]
}
const choseType = val => {
    posType.value = val.type
}
const choseStatus = val => {
    finshStatus.value = val.status
}
const choseAgencySource = val => {
    AgencySourceStatus.value = val.value
}
const choseStage = val => {
    mechantStage.value = val.stage
}
const chosetrade = val => {
    chosetrade.value = val.stage
}

const getCustomerCountStatistic = () => {
    customerCountStatistic().then(res => {
        belowCount.value = res.object.belowCount
        currBelowCount.value = res.object.currBelowCount
        currDirectCount.value = res.object.currDirectCount
        directCount.value = res.object.directCount
        sumCount.value = res.object.sumCount
    })
}
getCustomerCountStatistic()
// 商户列表
const getfindCustomerStatisticList = () => {
    findCustomerStatisticList({
        isRealNameAuth: active.value,
        useType: posType.value,
        compliance: finshStatus.value,
        tusn: tusn.value,
        agencySource: AgencySourceStatus.value,
        sort: sort.value,
        nameOrPhone: nameOrPhone.value,
        currentPage: currentPage.value
    }).then(res => {
        if (res.object.list && res.object.list.length < 10) {
            finished.value = true
            loading.value = false
        } else {
            currentPage.value += 1
            finished.value = false
            loading.value = false
        }
        merchartsTotal.value = res.object.total
        list.value = list.value.concat(res.object.list)
    })
}
const selectRealName = RealName => {
    active.value = RealName
    list.value = []
    getfindCustomerStatisticList()
}
const onLoad = () => {
    getfindCustomerStatisticList()
}
const onClickButton = () => {
    list.value = []
    getfindCustomerStatisticList()
}
// 重置筛选条件
const onRest = val => {
    list.value = []
    if (val == 'filter') {
        posType.value = ''
        finshStatus.value = ''
        AgencySourceStatus.value = ''
        tusn.value = ''
        show.value = false
    } else {
        sort.value = 'desc'
        showSort.value = false
    }
    getfindCustomerStatisticList()
}
// 确认筛选
const onSure = val => {
    list.value = []
    if (val == 'filter') {
        getfindCustomerStatisticList()
        show.value = false
    } else {
        getfindCustomerStatisticList()
        showSort.value = false
    }
}
const catTrading = () => {
    Router.push({
        name: 'MerchantData'
    })
}
const catDetail = item => {
    if(!item.name){
        showToast('商户未实名认证')
        return
    }
    Router.push({
        path: '/checkDetail',
        query: {
            CUSTOMER_NO: item.customerNo
            // CUSTOMER_NAME: item.
        }
    })
}
</script>

<style scoped lang="scss">
::v-deep .van-search__content {
    padding-left: 0 !important;
}
.uni_wrapper {
    padding: 15px;
    .header {
        position: relative;
        .bg {
            width: 100%;
        }
        .img_content {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            padding: 8px;
            .title {
                font-size: 20px;
                font-family: DingTalk JinBuTi;
                line-height: 40px;
                font-weight: 400;
                color: #ffffff;
                opacity: 1;
            }
        }
        .catTrading {
            position: absolute;
            top: 28px;
            right: 10px;
            text {
                font-size: 12px;
                font-family: SimHei;
                font-weight: 400;
                color: #ffffff;
                opacity: 1;
            }
            img {
                width: 14px;
                height: 14px;
            }
        }

        .bg_content {
            box-sizing: border-box;
            padding: 8px;
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
            .bgBox {
                width: 100%;
                opacity: 0.8;
            }
            .minBg {
                width: 88px;
                height: 54px;
                position: absolute;
                right: 8px;
                bottom: 8px;
            }
            .bg_content_cont {
                position: absolute;
                left: 0px;
                bottom: 0px;
                height: 100%;
                width: 100%;
                padding: 27px 10px;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                .line {
                    display: flex;
                    align-items: center;
                    .left,
                    .right {
                        width: 100%;
                        font-size: 16px;
                        font-family: DingTalk JinBuTi;
                        font-weight: 400;
                        color: #66d6ff;
                        opacity: 1;
                        text-align: center;
                    }
                }
            }
        }
    }
    .search {
        border-radius: 25px;
        overflow: hidden;
        .van-search__content {
            background: #fff;
        }
        .onClickButton {
            width: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #66d6ff;
            opacity: 1;
            border-radius: 18px;
            font-size: 14px;
            font-family: SimHei;
            font-weight: 400;
            color: #ffffff;
            opacity: 1;
        }
    }
    .floor {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
            background: #ffffff;
            border-radius: 10px;
            width: 94px;
            height: 20px;
            overflow: hidden;
            display: flex;
            align-items: center;
        }
        .RealName {
            font-size: 10px;
            font-family: SimHei;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 400;
            color: #66d6ff;
            width: 50%;
            height: 100%;
        }
        .right {
            font-size: 12px;
            font-family: SimHei;
            font-weight: 400;
            color: #000000;
        }
        .active {
            color: #ffffff;
            background: #66d6ff;
        }
    }
    .floor1 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .left,
        .right {
            padding: 10px 5px;
        }
        text {
            font-size: 12px;
            font-family: SimHei;
            font-weight: 400;
            color: #000000;
        }
        img {
            height: 14px;
            width: 14px;
            margin-left: 3px;
        }
    }
    .allSearch {
        position: sticky;
        background: #f7f8fa;
        top: 0px;
        padding-top: 10px;
    }
    .cardList {
        .card {
            position: relative;
            background: #ffffff;
            border-radius: 8px;
            display: flex;
            padding: 10px;
            margin-bottom: 10px;
            .itemStatus {
                position: absolute;
                right: 0;
                top: 0;
                border-radius: 0px 8px 0px 16px;
                background: #d1dfff;
                font-size: 12px;
                font-family: SimHei;
                font-weight: 400;
                color: #66d6ff;
                opacity: 1;
                padding: 5px 6px 4px 12px;
            }
            .head {
                width: 36px;
                height: 36px;
            }
            .card-content {
                padding: 0 10px;
                flex: 1;
                .name {
                    display: flex;
                    align-items: center;
                    text {
                        font-size: 14px;
                        font-family: SimHei;
                        font-weight: 400;
                        color: #000000;
                    }
                    .posType {
                        background: #d1dfff;
                        border-radius: 4px;
                        padding: 3px;
                        margin-right: 10px;
                        margin-left: 10px;
                        font-size: 12px;
                        font-family: SimHei;
                        font-weight: 400;
                        color: #66d6ff;
                    }
                }
                .cycle {
                    font-size: 12px;
                    font-family: SimHei;
                    padding: 5px 0;
                    font-weight: 400;
                    color: #b1b1b1;
                }
                .Trading {
                    display: flex;
                    line-height: 20px;
                    margin-top: 5px;
                    .left,
                    .right {
                        width: 50%;
                    }
                    .value {
                        font-size: 16px;
                        font-family: DingTalk JinBuTi;
                        font-weight: 400;
                        color: #66d6ff;
                    }
                    .label {
                        font-size: 12px;
                        font-family: SimHei;
                        font-weight: 400;
                        color: #8f8f8f;
                    }
                }
            }
        }
    }
}
.popup-content {
    padding: 44px 10px;
    .dateContent {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        .timeItem {
            // width: 45%;
            line-height: 60rpx;
            text-align: center;
            color: #ffffff;
            background: #386dfe;
            border-radius: 6rpx;
            padding: 4px 10px;
        }
    }
    .filterContent {
        padding: 40rpx;
    }
    .title {
        font-size: 18px;
        font-weight: blod;
        text-align: center;
        color: #000000;
        margin-bottom: 20px;
    }
    .btnBox {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        margin-top: 5px;

        .btnItem {
            // width: 32%;
            padding: 0px 10px;
            line-height: 30px;
            background: #f1f1f1;
            opacity: 1;
            border-radius: 4px;
            text-align: center;
            color: #707070;
            margin-top: 10px;
            margin-left: 10px;
            // margin-right: 6px;
        }
    }
    .acticitybtn {
        background: #66d6ff !important;
        color: #fff !important;
    }
}
.btnBottom {
    width: 100%;
    position: sticky;
    bottom: 20px;
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 5px;
    .reset {
        width: 100px;
        line-height: 36px;
        background: #f1f1f1;
        opacity: 1;
        border-radius: 4px;
        color: #656565;
        text-align: center;
    }
    .onSub {
        width: 100px;
        line-height: 36px;
        background: #66d6ff;
        opacity: 1;
        border-radius: 4px;
        color: #ffffff;
        text-align: center;
    }
}
.wrap {
    padding: 10px;
}
.search {
    height: 35px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
        flex: 1;
        background: #ffffff;
        opacity: 1;
        border-radius: 17px;
        overflow: hidden;
        display: flex;
        align-items: center;
        height: 100%;
        margin-right: 10px;
        .bg {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 66px;
            height: 100%;
            img {
                width: 20px;
            }
        }
        .serachBtn {
            width: 98px;
            background: #66d6ff;
            opacity: 1;
            border-radius: 40px;
            color: #fff;
        }
    }
    .right {
        height: 100%;
        width: 95px;
        background: #ffffff;
        opacity: 1;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        span {
            font-size: 14px;
            margin-right: 10px;
        }
        img {
            width: 18px;
        }
    }
}
.btn {
    div {
        padding: 5px 10px;
        border-radius: 10px;
    }
}
.footer {
    display: flex;
    align-items: center;
    .item {
        width: 50%;
        text-align: center;
        padding: 10px 0;
        color: #ffffff;
    }
    .van-button--primary {
        background: #eef8fe;
        color: #888;
        border: 0px;
    }
}
</style>
